﻿@model StatisticsPackagesViewModel

<div id="report-container">
</div>

<script type="text/html" id="rows-template">
    <!-- ko if: $data -->
    <td data-bind="attr: { class: IsNumeric ? 'statistics-number' : ''  , rowspan: Rowspan >= 1 ? Rowspan : null, }" style="vertical-align:top">
        <!-- ko if: Uri -->
        <a data-bind="attr: { href: Uri }, text: Data"></a>
        <!-- /ko -->
        <!-- ko ifnot: Uri -->
        <!-- ko if: IsNumeric -->
        <span data-bind="attr: { 'aria-label': Data }, text: parseInt(Data).toLocaleString()" tabindex="0"></span>
        <!-- /ko -->
        <!-- ko ifnot: IsNumeric -->
        <span data-bind="attr: { 'aria-label': Data }, text: Data" tabindex="0"></span>
        <!-- /ko -->
        <!-- /ko -->
    </td>
    <!-- /ko -->
</script>

<script type="text/html" id="report-template">
    <div class="row">
        <div data-bind="if: $data && LastUpdatedUtc" class="last-updated col-xs-12">
            <span data-bind="text: 'Statistics last updated at ' + moment(LastUpdatedUtc).format('YYYY-MM-DD HH:mm:ss') + ' UTC.'"></span>
        </div>
    </div>

    <div data-bind="if: $data" class="row">
        <div data-bind="attr: { id: Id }" class="statistics-pivot">
            <div class="statistics-sidebar col-sm-2">
                <form id="dimension-form">
                    <div class="table borderless stats-table-control">
                        <div data-bind="foreach: Dimensions">
                            <div class="checkbox">
                                <label>
                                    <input data-bind="attr: { id: 'checkbox-' + Value, value: Value, checked: IsChecked, 'aria-labelledby': Value + '-label' }" class="dimension-checkbox" name="groupby" type="checkbox">
                                    <span data-bind="attr: { id: Value + '-label', for: 'checkbox-' + Value, 'aria-label': 'Filter By ' + DisplayName }, text: DisplayName"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-sm-10 text-center" id="loading-placeholder">
                <div class="loader"></div>
            </div>
            <div class="col-sm-10" id="stats-data-display">
                <div class="stats-graph-title col-xs-12" id="statistics-graph-title-id"></div>
                <div class="stats-graph col-xs-12" id="statistics-graph-id"></div>
                <div class="stats-table-data">
                    <table data-bind="if: Table" class="pivot-table table">
                        <thead>
                            <tr>
                                <!-- ko foreach: Columns -->
                                <th data-bind="attr: { id: $data + '-column' }, text: $data" scope="col" class="dimension-column"></th>
                                <!-- /ko -->
                                <th scope="col">Downloads (last 6 weeks)</th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach: ShownRows">
                            <tr data-bind="template: { name: 'rows-template', foreach: $data }"></tr>
                        </tbody>
                        <tbody data-bind="foreach: HiddenRows" class="collapse" id="hidden-rows">
                            <!--
                            There must be some content (even if it is just whitespace or a comment) in data bound elements, as of Knockout 3.5.0.
                            See https://github.com/knockout/knockout/issues/2446.
                            -->
                        </tbody>
                    </table>
                    <!-- ko if: $data.reportSize > 6 -->
                    <button data-bind="if: $data.reportSize > 6, click: $data.SetupHiddenRows" type="button" data-toggle="collapse" class="btn btn-link btn-expander icon-link" data-target="#hidden-rows"
                            aria-expanded="false" aria-controls="hidden-rows" id="show-hidden-rows">
                        <i class="ms-Icon ms-Icon--CalculatorAddition" aria-hidden="true"></i>
                        <span>Show more</span>
                    </button>
                    <!-- /ko -->
                </div>
            </div>
        </div>
    </div>

    <div data-bind="ifnot: $data" class="row">
        <div class="col-xs-12">
            Download statistics are not currently available for this package. Please <a href="#" id="statistics-retry">retry</a> or check back later.
        </div>
    </div>
</script>